<template>
  <boss-view :hideArrow="false">
    <div slot="content" class="swiper-container titles">
      <div class="swiper-wrapper">
        <div class="swiper-slide">
          <div class="operateData">
            <!-- 带客量 / 销售额 / 销售量 -->
            <div class="top">
              <!-- 带客量 -->
              <view-item>
                <div slot="mainData" class="mainData">
                  <div class="left">
                    <div class="title">
                      <i class="bossVersion">&#xe60b;</i>
                      <p class="txt">带客量</p>
                    </div>
                    <div class="number">
                      <div class="sameMonth">
                        <i-count-up
                          :startVal="startVal"
                          :endVal="withStorage.currentMonthFollowCount"
                          :decimals="decimals"
                          :duration="duration"
                          :options="options"
                        />
                        <i class="units">人</i>
                      </div>
                      <!-- 同比上月 -->
                      <div class="lastMonth">
                        同比上月
                        <span class="inlineFlexYbase relBot">
                          {{withStorage.currentMonthFollowCountRatio}}
                          <i>%</i>
                        </span>
                        <i
                          :class="withStorage.currentMonthFollowCountRatio > 0 ? 'rise' : 'decline'"
                        ></i>
                        <!-- <i class="decline"></i> -->
                      </div>
                    </div>
                  </div>
                  <div class="right">
                    <div class="rate">
                      <span class="inlineFlexYbase">
                        <!-- <p class="inlineFlexYbase11111" style="margin-right: -40px;">{{withStorage.customerTurnoverRate}}<i>%</i></p> -->
                        <el-progress
                          type="circle"
                          :show-text="true"
                          :percentage="withStorage.customerTurnoverRate"
                          :width="100"
                          :stroke-width="6"
                          color="#f0bd26"
                        ></el-progress>
                      </span>
                    </div>
                    <p class="tip">客户成交率</p>
                  </div>
                </div>
              </view-item>
              <!-- 销售额 -->
              <view-item>
                <div slot="mainData" class="mainData">
                  <div class="left">
                    <div class="title">
                      <i class="bossVersion">&#xe609;</i>
                      <p class="txt">销售额</p>
                    </div>
                    <div class="number">
                      <div class="sameMonth">
                        <i-count-up
                          :startVal="startVal"
                          :endVal="sellData.currentMonthDealAmount"
                          :decimals="decimals"
                          :duration="duration"
                          :options="options"
                        />
                        <i class="units">万元</i>
                      </div>
                      <!-- 同比上月 -->
                      <div class="lastMonth">
                        同比上月
                        <span class="inlineFlexYbase relBot">
                          {{sellData.currentMonthDealAmountRatio}}
                          <i>%</i>
                        </span>
                        <!-- <i class="rise"></i> -->
                        <i :class="sellData.currentMonthDealAmountRatio > 0 ? 'rise' : 'decline'"></i>
                      </div>
                    </div>
                  </div>
                  <div class="right">
                    <div class="rate">
                      <span class="inlineFlexYbase">
                        <!-- <p class="inlineFlexYbase11111" style="margin-right: -40px;">57<i>.41%</i></p> -->
                        <el-progress
                          type="circle"
                          :show-text="true"
                          :percentage="sellData.currentMonthDealAmountAchievementRatio"
                          :width="100"
                          :stroke-width="6"
                          color="#28e787"
                        ></el-progress>
                      </span>
                    </div>
                    <p class="tip">销售额达成率</p>
                  </div>
                </div>
              </view-item>
              <!-- 销售量 -->
              <view-item>
                <div slot="mainData" class="mainData">
                  <div class="left">
                    <div class="title">
                      <i class="bossVersion">&#xe607;</i>
                      <p class="txt">销售量</p>
                    </div>
                    <div class="number">
                      <div class="sameMonth">
                        <i-count-up
                          :startVal="startVal"
                          :endVal="sellData.currentMonthCount"
                          :decimals="decimals"
                          :duration="duration"
                          :options="options"
                        />
                        <i class="units">套</i>
                      </div>
                      <!-- 同比上月 -->
                      <div class="lastMonth">
                        同比上月
                        <span class="inlineFlexYbase relBot">
                          {{sellData.currentMonthCountRatio}}
                          <i>%</i>
                        </span>
                        <i :class="sellData.currentMonthCountRatio > 0 ? 'rise' : 'decline'"></i>
                        <!-- <i class="decline"></i> -->
                      </div>
                    </div>
                  </div>
                  <div class="right">
                    <div class="rate">
                      <span class="inlineFlexYbase">
                        <el-progress
                          type="circle"
                          :show-text="true"
                          :percentage="sellData.currentMonthCountAchievementRatio"
                          :width="100"
                          :stroke-width="6"
                          color="#48e5ff"
                        ></el-progress>

                        <!-- <i>.32%</i> -->
                      </span>
                    </div>
                    <p class="tip">销售量达成量</p>
                  </div>
                </div>
              </view-item>
            </div>

            <!-- 成交量趋势 / 成交均价趋势 -->
            <div class="cen">
              <view-inside-item>
                <div slot="insideData" class="insideData">
                  <!-- 成交量趋势 -->
                  <div class="volume">
                    <main-title>
                      <span slot="txt" class="txt">成交量趋势</span>
                    </main-title>
                    <div class="chartTips">单位:套</div>
                    <line-chartss
                      v-model="trendData"
                      :chartStyle="'min-height:255px;'"
                      :option="lineChartOption"
                    ></line-chartss>
                  </div>
                  <em></em>
                  <!-- 成交均价趋势 -->
                  <div class="averPrice">
                    <main-title>
                      <span slot="txt" class="txt">成交均价趋势</span>
                    </main-title>
                    <div class="chartTips">单位:元</div>
                    <line-chartss
                      v-model="averagePriceData"
                      :chartStyle="'min-height:255px;'"
                      :option="lineChartOption"
                    ></line-chartss>
                  </div>
                </div>
              </view-inside-item>
            </div>

            <!-- 销售渠道 / 楼盘存量 -->
            <div class="bot">
              <!-- 销售渠道 -->
              <view-chart-item>
                <div slot="chartData" class="chartData">
                  <main-title>
                    <span slot="txt" class="txt">销售渠道</span>
                  </main-title>
                  <div class="chartTips">单位:套</div>
                  <bar-charts
                    slot="main"
                    v-model="distributionChannelArr"
                    :option="distributionChannelOption"
                    :chartStyle="'min-height:255px;'"
                  ></bar-charts>
                </div>
              </view-chart-item>
              <!-- 楼盘存量 -->
              <view-chart-item>
                <div slot="chartData" class="chartData building">
                  <main-title>
                    <span slot="txt" class="txt">楼盘存量</span>
                  </main-title>
                  <div class="data">
                    <div class="table">
                      <p class="title">
                        <span>项目</span>
                        <span>已售</span>
                        <span>存量</span>
                        <span class="inlineFlexYbase">
                          预计收入
                          <i>(万元)</i>
                        </span>
                        <span>已售比例</span>
                      </p>
                      <ul class="list">
                        <li class="item" v-for="(item,index) in tableData" :key="index">
                          <span>{{item.name}}</span>
                          <span>{{item.sold}}</span>
                          <span>{{item.stock}}</span>
                          <span>{{item.estimatedRevenue}}</span>
                          <span>{{item.soldRatio}}%</span>
                        </li>
                      </ul>
                    </div>
                    <div class="chartTips">单位:套</div>
                    <pie-chart
                      v-model="stockArr"
                      :option="stockOption"
                      :chartStyle="'width:378px;min-height:255px;'"
                    ></pie-chart>
                  </div>
                </div>
              </view-chart-item>
            </div>
          </div>
        </div>
        <div class="swiper-slide">
          <!-- 全员营销 -->
          <div class="sales">
            <!-- 选择月 -->
            <select-time @onTime="onTime"></select-time>
            <!-- 销售 / 全员营销 -->
            <view-chart-item :class="'percentage'">
              <div slot="chartData" class="chartData">
                <!-- 销售 -->
                <div class="left">
                  <main-title>
                    <span slot="txt" class="txt">销售</span>
                  </main-title>
                  <div class="chartTips">单位:套</div>
                  <div class="task">
                    <div class="actual">
                      <p>实际</p>
                      <p>{{page2Data.countAchievement}}</p>
                    </div>
                    <div class="plan">
                      <p>计划</p>
                      <p>{{page2Data.countPlan}}</p>
                    </div>
                  </div>
                </div>
                <em></em>
                <!-- 全员营销 -->
                <div class="right">
                  <div class="rateBox">
                    <div class="rate" v-for="(item,index) in progressViewList" :key="index">
                      <span class="inlineFlexYbase">
                        <el-progress
                          type="circle"
                          :show-text="false"
                          :percentage="item.statisticsNum/item.baseSellingNum * 100 > 100 ? 100 : item.statisticsNum/item.baseSellingNum * 100"
                          :width="120"
                          :stroke-width="6"
                          color="#28e787"
                        ></el-progress>
                      </span>
                      <div class="valuenow">
                        <p>
                          {{item.statisticsNum}}
                          <i>/{{item.baseSellingNum}}</i>
                        </p>
                      </div>
                      <p class="rateTxt">{{item.plateName}}</p>
                    </div>
                  </div>
                </div>
              </div>
            </view-chart-item>
            <!-- 销售中心Top10 / 全员营销Top10 -->
            <div class="Top10">
              <!-- 销售中心TOP10 -->
              <view-chart-item>
                <div slot="chartData" class="chartData">
                  <main-title>
                    <span slot="txt" class="txt">销售中心TOP10</span>
                  </main-title>
                  <div class="table">
                    <div class="title">
                      <span>排名</span>
                      <span>姓名</span>
                      <span>岗位</span>
                      <span>单位</span>
                      <span>{{tableTit}}</span>
                      <span>年度总成交数</span>
                    </div>
                    <ul class="list">
                      <span class="line"></span>
                      <span class="line"></span>
                      <li
                        v-for="(item,index) in integratingMarketingList"
                        :key="index"
                        class="item"
                      >
                        <span>{{index+1}}</span>
                        <span>{{item.employeeName}}</span>
                        <span>{{item.positionName.length < 6 ? item.positionName : item.positionName.substring(0 , 5) + "…"}}</span>
                        <span>{{item.departmentName}}</span>
                        <span>{{item.dealNum}}</span>
                        <span>{{item.totalNum}}</span>
                      </li>
                    </ul>
                  </div>
                </div>
              </view-chart-item>
              <!-- 全员营销TOP10 -->
              <view-chart-item>
                <div slot="chartData" class="chartData">
                  <main-title>
                    <span slot="txt" class="txt">全员营销TOP10</span>
                  </main-title>
                  <div class="table">
                    <div class="title">
                      <span>排名</span>
                      <span>姓名</span>
                      <span>岗位</span>
                      <span>单位</span>
                      <span>{{tableTit}}</span>
                      <span>年度总成交数</span>
                    </div>
                    <ul class="list">
                      <span class="line"></span>
                      <span class="line"></span>
                      <li v-for="(item,index) in salesCenterList" :key="index" class="item">
                        <span>{{index+1}}</span>
                        <span>{{item.employeeName}}</span>
                        <span>{{item.positionName.length < 6 ? item.positionName : item.positionName.substring(0 , 5) + "…"}}</span>
                        <span>{{item.departmentName}}</span>
                        <span>{{item.dealNum}}</span>
                        <span>{{item.totalNum}}</span>
                      </li>
                    </ul>
                  </div>
                </div>
              </view-chart-item>
            </div>
          </div>
        </div>
      </div>
    </div>
  </boss-view>
</template>

<script>
import selectTime from "@/components/bossVersion/selectTime";
import Swiper from "swiper";
import ICountUp from "vue-countup-v2";
import viewItem from "@/components/bossVersion/viewItem";
import viewChartItem from "@/components/bossVersion/viewChartItem";
import viewInsideItem from "@/components/bossVersion/viewInsideItem";
import mainTitle from "@/components/bossVersion/mainTitle";
import lineChartss from "@/components/Charts/lineChartssSmooth";
import barCharts from "@/components/Charts/barCharts";
import pieChart from "@/components/Charts/pieChart";
import bossView from "@/components/bossVersion/bossView";
import {
  GetRealEstateTakeALook,
  GetRealEstateMarketingData,
  GetDoubleDetailList,
  GetSaleAnalyseStatueList,
  GetListForStatistics,
  GetDataByTargetForTwo,
  GetMarketingCenterSalesList,
  GetRealEstateSalePlanData,
  GetListForBoss
} from "@/api/bossVersion/realEstate";
export default {
  components: {
    selectTime,
    ICountUp,
    pieChart,
    lineChartss,
    barCharts,
    viewItem,
    viewChartItem,
    viewInsideItem,
    mainTitle,
    bossView
  },
  data() {
    return {
      page2Data: { countAchievement: 0, countPlan: 0 },
      integratingMarketingList: [],
      salesCenterList: [],
      progressViewList: [],
      tableTit: "当月成交套数",
      // 数字
      startVal: 0,
      decimals: 0,
      totaDecimals: 2,
      duration: 2.5,
      options: {
        useEasing: true,
        useGrouping: true,
        separator: ",",
        decimal: ".",
        prefix: "",
        suffix: ""
      },
      tableData: [
        { name: "公寓", sold: 0, stock: 0, estimatedRevenue: 0, soldRatio: 0 },
        { name: "住宅", sold: 0, stock: 0, estimatedRevenue: 0, soldRatio: 0 },
        { name: "商铺", sold: 0, stock: 0, estimatedRevenue: 0, soldRatio: 0 },
        {
          name: "储藏间",
          sold: 0,
          stock: 0,
          estimatedRevenue: 0,
          soldRatio: 0
        },
        { name: "车位", sold: 0, stock: 0, estimatedRevenue: 0, soldRatio: 0 },
        { name: "合计", sold: 0, stock: 0, estimatedRevenue: 0, soldRatio: 0 }
      ], // 表格数据
      sellData: {
        currentMonthCount: 0,
        currentMonthCountRatio: 0,
        currentYearCount: 0,
        currentYearCountRatio: 0,
        currentMonthDealAmount: 0,
        currentMonthDealAmountRatio: 0,
        currentYearDealAmount: 0,
        currentYearDealAmountRatio: 0,
        currentMonthCountAchievementRatio: 0, // 当前月份成交达成率
        currentMonthDealAmountAchievementRatio: 0 // 当前月份交易额成交率
      }, // 销售数据
      withStorage: {
        currentMonthFollowCount: 0,
        currentMonthFollowCountRatio: 0,
        customerTurnoverRate: 0
      }, // 带客量
      stockArr: [], // 楼盘存量
      stockOption: {
        color: ["#28e787", "#f0bd26", "#48e5ff", "#FF7145", "#ff3e9a"],
        radius: ["55%", "70%"],
        center: ["50%", "50%"],
        // roseType: "radius",
        startAngle: 250,
        formatter: function(value) {
          return (
            "{value|" + value.name + "}"
            // "{value|" + value.name + "}" + "\n" + "{large|" + value.value + "}"
          );
        },
        hidePieMargin: true,
        showLine: true,
        showLabel: true,
        legend: {
          show: false
        }
      },
      distributionChannelArr: [], // 销售渠道
      distributionChannelOption: {
        hidePieMargin: true,
        color: ["#28e787", "#f0bd26", "#48e5ff"],
        legend: {
          top: 15,
          right: "0%",
          data: [
            {
              icon: "rect"
            },
            {
              icon: "rect"
            },
            {
              icon: "rect"
            }
          ]
        },
        grid: {
          width: "95%",
          height: 150,
          top: 60,
          left: "3%"
        },
        xAxis: {
          axisLabel: {
            rotate: 0
          }
        },
        labelDefault: 1
        // startColor: ["#0071BC", "#29AAE1"],
        // endColor: ["#006837", "#22B473"]
      },
      trendData: [], // 成交趋势
      averagePriceData: [], // 成交均价趋势
      lineChartOption: {
        smooth: 0,
        dataZoom: [
          {
            show: false
          }
        ],
        toolTipTxtColor: "#48e5ff",
        grid: {
          width: "94%",
          height: 160,
          top: 60,
          left: "4.3%",
          right: "10%",
          bottom: "20%"
        },
        legendColor: "#48e5ff",
        legend: {
          top: 20,
          right: 0,
          data: [
            {
              icon: "rect"
            },
            {
              icon: "rect"
            },
            {
              icon: "rect"
            },
            {
              icon: "rect"
            },
            {
              icon: "rect"
            }
          ]
        },
        hideLineColor: true,
        showSymbol: "none",
        tooltip: {
          show: true,
          axisPointer: {
            type: "shadow",
            shadowStyle: {
              color: {
                colorStops: [
                  {
                    offset: 0,
                    color: "rgba(0,0,0,0)" // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "rgba(0,209,255,0.2)" // 100% 处的颜色
                  }
                ]
              }
            }
          }
        },
        showLabel: false,
        xAxis: {
          z: 10,
          boundaryGap: false,
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            rotate: 0,
            inside: false,
            rich: {
              value: {
                color: "#48e5ff"
              }
            }
          }
        },
        yAxis: {
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: "rgba(47, 240, 210, 0.2)",
              type: "dashed"
            }
          },
          axisLabel: {
            color: "#48e5ff"
          }
        },
        color: ["#FAAF3B", "#28e787", "#ff3e9a", "#48e5ff", "#ff7145"]
      }
    };
  },
  mounted() {
    var titles = new Swiper(".titles", {
      direction: "vertical",
      slidesPerView: 1,
      paginationClickable: true,
      spaceBetween: 30,
      mousewheel: true, // 开启鼠标滚轮控制Swiper切换。可设置鼠标选项，默认值false
      mousewheelControl: true
    });
    titles.init();
    $(function() {
      $(".el-progress-circle__track").attr("stroke", "transparent");
    });
    this.GetRealEstateTakeALookFun(); // 获取带客量数据
    this.GetSellFun(); // 获取销售数据
    this.GetTrendData();
    this.GetAveragePriceData();
    this.GetDistributionChannelArr();
    this.GetStockArr();
    this.GetTableData();
  },
  methods: {
    onTime(time) {
      this.$set(this, "page2Data", { countAchievement: 0, countPlan: 0 });
      if (time.timeType === "3010") {
        this.$set(this, "tableTit", "当年成交套数");
      } else {
        this.$set(this, "tableTit", "当月成交套数");
      }
      this.GetListForStatisticsFun(time);
      this.GetListForBossFun(time);
      this.GetMarketingCenterSalesListFun(time);
      this.GetPage2Data(time);
    },

    async GetPage2Data(time) {
      const params = {
        beginTime: time.startTime,
        startTime: time.startTime,
        endTime: time.endTime
      };
      try {
        var res = await GetRealEstateSalePlanData(params);
        if (res.data.code === "0") {
          this.$set(this, "page2Data", res.data.result);
        }
      } catch (e) {
        console.log(e);
      }
    },
    async GetMarketingCenterSalesListFun(time) {
      const params = {
        jianDaoTuan: false,
        beginTime: time.startTime,
        startTime: time.startTime,
        endTime: time.endTime
      };
      try {
        var res = await GetMarketingCenterSalesList(params);
        if (res.data.code === "0") {
          this.$set(this, "integratingMarketingList", res.data.result);
        }
      } catch (e) {
        console.log(e);
      }
    },
    async GetListForBossFun(time) {
      const params = {
        jianDaoTuan: false,
        beginTime: time.startTime,
        startTime: time.startTime,
        endTime: time.endTime
      };
      try {
        var res = await GetListForBoss(params);
        if (res.data.code === "1") {
          this.$set(this, "salesCenterList", res.data.result);
        }
      } catch (e) {
        console.log(e);
      }
    },
    async GetListForStatisticsFun(time) {
      const params = {
        beginTime: time.startTime,
        startTime: time.startTime,
        endTime: time.endTime
      };
      try {
        var res = await GetListForStatistics(params);
        if (res.data.code === "0") {
          this.$set(this, "progressViewList", res.data.result);
        }
      } catch (e) {
        console.log(e);
      }
    },
    async GetRealEstateTakeALookFun() {
      try {
        var res = await GetRealEstateTakeALook();
        if (res.data.code === "0") {
          this.$set(this, "withStorage", res.data.result);
        }
      } catch (e) {
        console.log(e);
      }
    },
    async GetSellFun() {
      try {
        var res = await GetRealEstateMarketingData();
        if (res.data.code === "0") {
          this.$set(this, "sellData", res.data.result);
        }
      } catch (e) {
        console.log(e);
      }
    },
    // 获取成交量图表数据
    async GetTrendData() {
      const p = {
        queryType: "27002",
        timeType: "3014",
        timeAccuracy: "4003"
      };
      try {
        var res = await GetDoubleDetailList(p);
        if (res.data.code === "0") {
          res.data.result.forEach(element => {
            element.xData1 = this.$utils.formatterMonthFun(element.xData1);
          });
          this.$set(this, "trendData", res.data.result);
        }
      } catch (e) {
        console.log(e);
      }
    },
    // 获取成交均价趋势图表数据  成交均价趋势
    async GetAveragePriceData() {
      const p = {
        queryType: "27004",
        timeType: "3014",
        timeAccuracy: "4003"
      };
      try {
        var res = await GetDoubleDetailList(p);
        if (res.data.code === "0") {
          res.data.result.forEach(element => {
            element.xData1 = this.$utils.formatterMonthFun(element.xData1);
          });
          this.$set(this, "averagePriceData", res.data.result);
        }
      } catch (e) {
        console.log(e);
      }
    },
    // 获取销售渠道图表数据
    async GetDistributionChannelArr() {
      const p = {
        queryType: "27016",
        timeType: "3014",
        timeAccuracy: "4003"
      };
      try {
        var res = await GetDoubleDetailList(p);
        if (res.data.code === "0") {
          res.data.result.forEach(element => {
            element.xData1 = this.$utils.formatterMonthFun(element.xData1);
          });
          this.$set(this, "distributionChannelArr", res.data.result);
        }
      } catch (e) {
        console.log(e);
      }
    },
    // 获取楼盘存量表格数据
    async GetTableData() {
      try {
        var res = await GetSaleAnalyseStatueList();
        if (res.data.code === "0") {
          this.$set(this, "tableData", res.data.result);
          debugger;
        }
      } catch (e) {
        console.log(e);
      }
    },
    // 获取楼盘存量图表数据
    async GetStockArr() {
      const p = {
        queryType: "27019",
        timeType: "3014"
      };
      try {
        var res = await GetDataByTargetForTwo(p);
        if (res.data.code === "0") {
          this.$set(this, "stockArr", res.data.result.list);
        }
      } catch (e) {
        console.log(e);
      }
    }
  }
};
</script>

<style lang="scss">
// 进度条
.operateData,
.sales {
  .el-progress__text {
    color: inherit;
    font-size: 30px !important;
    font-weight: bold;
  }
}
</style>

<style lang="scss" scoped>
@import "../../../../styles/bossVersion/_basics";

.titles {
  @include absoluteAllSides(94, 20, 20, 140, 1);
}
.operateData {
  // 带客量 / 销售额 / 销售量
  .top {
    @include flex;
    & > .item {
      width: 573px;
      height: 270px;
      padding: 60px 38px 25px 75px;
      line-height: 1;
      & > .mainData {
        display: flex;
        justify-content: space-between;
        align-items: center;
        & > .left {
          & > .title {
            @include flexFdc;
            & > .bossVersion {
              margin-bottom: 5px;
              font-size: 36px;
            }
            & > .txt {
              @include bold(20px);
            }
          }
          & > .number {
            @include flexYbase;
            flex-flow: row wrap;
            margin-top: 10px;
            & > .sameMonth {
              @extend .inlineFlexYbase;
              margin-right: 8px;
              & > span {
                @include din(54px);
                & > .el-progress__text {
                  font-size: 32px;
                  color: #faaf3b;
                }
              }
              & > .units {
                margin-left: 5px;
                font-size: 16px;
              }
            }
            & > .lastMonth {
              @include flexYend;
              font-size: 14px;
              & > span {
                margin-left: 5px;
                @include din(24px);
                & > i {
                  font-size: 16px;
                }
              }
            }
          }
        }
        .right {
          @include flexFdcXcen;
          & > .rate {
            @include flexXYcen;
            position: relative;
            width: 106px;
            height: 106px;
            // background: conic-gradient($color3, rgba($color3, 0));
            border-radius: 50%;
            & > span {
              position: relative;
              z-index: 2;
              @include din(46px);
              & > i {
                font-size: 24px;
              }
            }
            &:after {
              content: "";
              position: absolute;
              top: 6px;
              right: 6px;
              bottom: 6px;
              left: 6px;
              z-index: 1;
              background-color: #010b44;
              border-radius: 50%;
            }
          }
          & > .tip {
            margin-top: 14px;
            font-size: 16px;
          }
        }
      }
    }
    & > .item:nth-of-type(1) {
      color: $color3;
    }
    & > .item:nth-of-type(2) {
      color: $color4;
      .right {
        & > .rate {
          // background: conic-gradient($color4, rgba($color4, 0));
        }
      }
    }
    & > .item:nth-of-type(3) {
      color: $color1;
      .right {
        & > .rate {
          // background: conic-gradient($color1, rgba($color1, 0));
        }
      }
    }
  }
  // 成交量趋势 / 成交均价趋势
  .cen {
    margin-top: 20px;
    margin-bottom: 20px;
    & > .insideItem {
      width: 100%;
      height: 328px;

      & > .insideData {
        @include flexYcen;
        .chart {
          margin-top: 30px;
        }
        // 成交量趋势 / 成交均价趋势
        & > .volume,
        & > .averPrice {
          position: relative;
          z-index: 1;
          width: calc(100% / 2 - 30px);
          & > .chartTips {
            @include absoluteTLSide(44, 0, 1);
          }
        }
        & > em {
          width: 1px;
          height: 230px;
          margin-left: 30px;
          margin-right: 30px;
          background-color: $color9;
        }
      }
    }
  }
  // 销售渠道 / 楼盘存量
  .bot {
    @include flex;
    & > .chartItem {
      width: 870px;
      height: 328px;
      & > .chartData {
        position: relative;
        z-index: 1;
        & > .chartTips {
          @include absoluteTLSide(42, 0, 1);
        }
      }
      //  楼盘存量
      .building {
        & > .data {
          @include flex;
          & > .table {
            width: 448px;
            margin-top: 14px;
            & > .title {
              @include flex;
              height: 40px;
              padding: 0 15px;
              line-height: 40px;
              background-color: $color9;
              font-weight: 700;
              & > span {
                color: $color3;
                @include bold(16px);
                & > i {
                  font-size: 12px;
                }
                &:nth-of-type(1) {
                  width: 82px;
                  padding-left: 22px;
                }
                &:nth-of-type(2),
                &:nth-of-type(3),
                &:nth-of-type(4),
                &:nth-of-type(5) {
                  width: 62px;
                  padding-left: 16px;
                }
                &:nth-of-type(4) {
                  width: 130px;
                }
                &:nth-of-type(5) {
                  width: 85px;
                }
              }
            }
            & > .list {
              width: 448px;
              padding: 5px 15px 0;
              & > .item {
                @include flex;
                height: 34px;
                line-height: 34px;
                & > span {
                  color: $color4;
                  @include din(18px);
                  @include borderRight;
                  border-color: $color9;
                  &:nth-of-type(1) {
                    width: 82px;
                    padding-left: 22px;
                    color: $color1;
                    font-size: 14px;
                  }
                  &:nth-of-type(2),
                  &:nth-of-type(3),
                  &:nth-of-type(4),
                  &:nth-of-type(5) {
                    width: 62px;
                    padding-left: 16px;
                  }
                  &:nth-of-type(4) {
                    width: 130px;
                  }
                  &:nth-of-type(5) {
                    width: 85px;
                    border-right: 0;
                  }
                }
              }
              & > .item:nth-child(2n) {
                background-color: $contentBack;
              }
            }
          }
          & > .chartTips {
            position: absolute;
            top: 15%;
            left: 60%;
            z-index: 1;
          }
        }
      }
      .chart {
        width: 100%;
        height: 220px;
        margin-top: 30px;
      }
    }
  }
}
// 销售
.sales {
  // 销售 / 全员营销 - 百分比
  .percentage {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 280px;
    margin-top: 20px;
    margin-bottom: 20px;
    line-height: 1;
    & > .chartData {
      @include flexYcen;
      .task {
        margin-top: 36px;
        text-align: center;
        .actual {
          margin-bottom: 26px;
          & > p {
            color: $color3;
            &:nth-of-type(1) {
              font-size: 18px;
            }
            &:nth-of-type(2) {
              @include din(40px);
            }
          }
        }
        .plan {
          & > p {
            color: $budget;
            &:nth-of-type(1) {
              font-size: 18px;
            }
            &:nth-of-type(2) {
              @include din(24px);
            }
          }
        }
      }
      .rateBox {
        display: flex;
        justify-content: space-around;
        margin-top: 30px;
        .rate {
          position: relative;
          width: 120px;
          height: 120px;
          color: $color3;
          text-align: center;
          border-radius: 50%;
          & > span {
            position: relative;
            z-index: 2;
            @include din(46px);
            & > i {
              font-size: 24px;
            }
          }
          &:after {
            content: "";
            position: absolute;
            top: 6px;
            right: 6px;
            bottom: 6px;
            left: 6px;
            z-index: 1;
            background-color: #010b44;
            border-radius: 50%;
          }
          .valuenow {
            @include flexXYcen;
            @include absoluteAllSides(0, 0, 0, 0, 3);
            & > p {
              @extend .flexYbase;
              @include din(32px);
              & > i {
                font-size: 22px;
              }
            }
          }
        }
      }
      & > .left {
        position: relative;
        width: 228px;
      }
      & > em {
        width: 1px;
        height: 220px;
        background-color: rgba($color2, 0.1);
      }
      & > .right {
        position: relative;
        width: calc(100% - 228px);
        .rate {
          color: $color4;
        }
        .chartTips {
          margin-left: 10px;
        }
      }
      .chartTips {
        margin-top: 10px;
        margin-left: 10px;
      }
      .rateTxt {
        margin-top: 16px;
        font-size: 18px;
      }
    }
  }
  .Top10 {
    @include flex;
    & > .chartItem {
      width: calc(100% / 2);
      height: 582px;
      padding: 28px;
      & > .chartData {
        & > .table {
          margin-top: 25px;
          & > .title {
            @include flexYcen;
            width: 100%;
            height: 40px;
            padding-left: 8px;
            padding-right: 10px;
            background-color: rgba($color2, 0.1);
            & > span {
              width: calc(100% / 6);
              height: 40px;
              line-height: 40px;
              color: $color3;
              @include bold(16px);
              text-align: center;
            }
          }
          & > .list {
            position: relative;
            z-index: 1;
            padding: 0 10px 0 8px;
            & > .item {
              @include flexYcen;
              width: 100%;
              height: 48px;
              &:nth-child(2n) {
                height: 40px;
                background-color: $dataBack;
              }
              & > span {
                width: calc(100% / 6);
                color: $mainBlue;
                font-size: 16px;
                text-align: center;
                &:nth-child(n + 5) {
                  @include din(20px);
                }
                &:nth-last-of-type(1) {
                  color: $color4;
                }
                &:nth-last-of-type(2) {
                  color: $budget;
                }
              }
            }
            &:before {
              content: "";
              position: absolute;
              top: 12px;
              left: 140px;
              z-index: 1;
              width: 1px;
              height: calc(100% - 16px);
              background-color: rgba($color2, 0.1);
            }
            &:after {
              content: "";
              position: absolute;
              top: 12px;
              left: calc(140px * 2 - 8px);
              z-index: 1;
              width: 1px;
              height: calc(100% - 16px);
              background-color: rgba($color2, 0.1);
            }
            & > .line:nth-of-type(1) {
              &:before {
                content: "";
                position: absolute;
                top: 12px;
                left: calc(140px * 3 - 16px);
                z-index: 1;
                width: 1px;
                height: calc(100% - 16px);
                background-color: rgba($color2, 0.1);
              }
              &:after {
                content: "";
                position: absolute;
                top: 12px;
                left: calc(140px * 4 - 24px);
                z-index: 1;
                width: 1px;
                height: calc(100% - 16px);
                background-color: rgba($color2, 0.1);
              }
            }
            & > .line:nth-of-type(2) {
              &:before {
                content: "";
                position: absolute;
                top: 12px;
                left: calc(140px * 5 - 32px);
                z-index: 1;
                width: 1px;
                height: calc(100% - 16px);
                background-color: rgba($color2, 0.1);
              }
            }
          }
        }
      }
    }
  }
}
</style>
